<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <div v-if="flag">
      <van-cell title="优惠卡消费" size="large" />
      <van-cell title="商家" :value="card.retailer_name" />
      <van-cell title="优惠卡" :value="card.r_card_name" />
      <van-cell title="面值" :value="card.r_card_amount + ' 元'" />
      <van-cell title="消费数量" :value="card.r_count + ' 张'" />
    </div>
    <van-empty :description="errMsg" v-else/>
    <div style="margin: 32px 64px" >
      <van-button round block type="info" @click="goBack">返回</van-button>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { wxUserCardConsume } from "@/api/card";

export default {
  name: "ClientConsumeAction",
  components: {
    NavBar
  },
  computed: {},
  props: ["card_id"],
  data() {
    return {
      title: this.$route.meta.title,
      errMsg: "",
      flag: false,
      card: {
        
      },
    };
  },
  mounted() {
    this.giftCardConsume();
  },
  methods: {

    goBack() {
      this.$router.push("/card");
    },
    giftCardConsume() {
      const data = {
        card_id: this.card_id,
        count: this.$route.query.count,
        key: this.$route.query.key,
        pid: this.$route.query.pid,
      };

      wxUserCardConsume(data)
        .then((res) => {
          const data = res.data;
          if (data.status_code == 200) {
            console.log(data.data);
            this.card = data.data
            this.flag = true
            this.$toast.success(data.message);
          } else {
            this.$toast(data.message);
            this.errMsg = data.message;
            this.flag = false
          }
        })
        .catch(() => {
          this.flag = false
          this.errMsg = "优惠卡消费失败!";
          this.$toast("优惠卡消费!");
        });
    },
  },
};
</script>

<style  scoped>

</style>